<template>
  <div class="preview flex-column">
    <div class="head flex-row">
      <tag :type="data.type"></tag>
      <like-btn :favNum="data.fav_nums" :isLike="isLike" :currentOne="data" v-if="!isOne" />
    </div>
    <img :src="data.img_url" :class="imgType" />
    <p class="content no-wrap-more">{{data.content}}</p>
  </div>
</template>

<script>
import Tag from '@/components/Tag/Tag.vue'
import LikeBtn from '@/components/LikeBtn/LikeBtn.vue'

export default {
  name: 'Preview',
  data () {
    return {
      isOne: false,
      isLike: true
    }
  },
  computed: {
    imgType () {
      return this.isOne ? 'other-img' : this.data.type === 200 ? 'music-img' : 'other-img'
    }
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    _checkType () { // 判断是不是 one 集合数据
      if (this.data.id) {
        this.isOne = true
      }
    }
  },
  mounted () {
    this._checkType()
  },
  components: {
    Tag,
    LikeBtn
  }
}
</script>

<style lang="stylus" scoped>
  .preview
    width 330rpx
    background-color #fff
    .head
      width 100%
      height 80rpx
      box-sizing border-box
      padding 0 16rpx
    .other-img
      width 100%
      height 240rpx
    .music-img
      width 240rpx
      height 240rpx
      border-radius 50%
    .content
      margin 30rpx 32rpx
      height 116rpx
      font-size 14px
      color #666
</style>
